<template>
  <div class="container">
    <div class="box box-ver h-p100 w-p100">
      <div class="search box box-ac">
        <div class="icon icon-search"></div>
        <input placeholder="搜索" v-model="searchWord" class="box-f1" type="text">
      </div>
      <div class="box box-ver box-f1 of-y-s">
        <div v-if="searchList.length > 0" class="tag">
          所有借款用途
        </div>
        <div  v-if="searchList.length > 0" class="list list1">
          <div @click="checkItem(item)" v-for="(item, index) in searchList" :value="item" :key="index" class="item box box-ver">
            <div class="name ell">{{item.expenseTypeName}}</div>
            <div class="code tc-999">{{item.expenseTypeName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'selectCompany',
  data () {
    return {
      dataList: [],
      searchList: [],
      searchWord: '',
      timer: null
    }
  },
  computed: mapState(['userNum', 'userInfo', 'getBudgetDo']),
  mounted () {
    this.from = this.$route.query.from
    this.getExpenseUtils()
  },
  watch: {
    searchWord () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.search()
      }, 666)
    }
  },
  methods: {
    checkItem (item) {
      this.$store.commit('bizAccountBill', {
        expenseNum: item.expenseTypeNumber,
        expenseName: item.expenseTypeName,
        expenseId: item.expenseTypeID
      })
      this.$router.go(-1)
    },
    search () {
      let searchWord = this.searchWord
      let list = []
      this.dataList.forEach(item => {
        if (item.expenseTypeName.indexOf(searchWord) > -1 || item.expenseTypeName.indexOf(searchWord) > -1) {
          list.push(item)
        }
      })
      this.searchList = list
    },
    getExpenseUtils () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getExpenseUtils',
          userNum: this.userNum,
          companyNum: this.userInfo.companyNum,
          from: 'daily'
        }
      }).then(res => {
        if (res.code === 200) {
          this.dataList = res.t
          // this.dataList = res.t.sort((a, b) => {
          //   return (a.expenseTypeName).localeCompare(b.expenseTypeName)
          // })
          this.searchList = this.dataList
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search';
</style>
